<template>
	<div class="add-coupon">
		<list-title :data="header"></list-title>
		<el-form :model="couponForm" :rules="rules" ref="couponForm" label-width="200px">
			<el-form-item label="优惠券名称" prop="data.couponname" style="width: 520px;">
				<el-input v-model="couponForm.data.couponname" placeholder="优惠券名称"></el-input>
			</el-form-item>
			<el-form-item label="优惠券类型" prop="data.flag" style="width: 520px;">
				<el-radio-group v-model="couponForm.data.flag">
					<el-radio :label="1">满减券</el-radio>
					<el-radio :label="2">打折券</el-radio>
					<el-radio :label="3">现金券</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="优惠券条件" prop="data.condition_amount" style="width: 520px;" v-if="couponForm.data.flag != 3">
				<el-input-number v-model="couponForm.data.condition_amount" :step="1" :min="0" :max="60000" style="width: 200px"></el-input-number>
			</el-form-item>
			<el-form-item label="优惠券金额" prop="data.amount" style="width: 520px;" v-if="couponForm.data.flag == 1 || couponForm.data.flag == 3">
				<el-input-number v-model="couponForm.data.amount" :step="1" :min="0" :max="60000" style="width: 200px"></el-input-number>
			</el-form-item>
			<el-form-item label="折扣" prop="data.discount" style="width: 520px;" v-if="couponForm.data.flag == 2">
				<el-input-number v-model="couponForm.data.discount" :precision="1" :step="0.1" :min="0" :max="10"></el-input-number>
			</el-form-item>
			<el-form-item label="描述说明" prop="data.remark" style="width: 520px;">
				<el-input type="textarea" :rows="3" placeholder="请输入描述说明" v-model="couponForm.data.remark"></el-input>
			</el-form-item>
			<el-form-item label="发行量" prop="data.circulation" style="width: 300px;">
				<el-input-number v-model="couponForm.data.circulation" controls-position="right" :min="0" :max="10000"></el-input-number>
			</el-form-item>
			<el-form-item label="有效期" prop="data.validityTime">
				<el-date-picker
				v-model="couponForm.data.validityTime"
				type="daterange"
				format="yyyy-MM-dd"
				value-format="yyyy-MM-dd"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('couponForm')" :disabled='couponForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='couponForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('couponForm')" v-if='couponForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
export default {
	data() {
		var validateValidityTime = (rule, value, callback) => {
			if(value == null){
				value = ['', '']
			}
			if (value[0] === '' || value[1] === '') {
				callback(new Error('请输入有效期'));
			} else {
				callback();
			}
		};
		return {
			/*头部数据*/
			header: {
				title: '添加优惠券规则',
				reload: false,
				buttons: [
					{
						title: '优惠券规则列表',
						type: 'primary',
						pathName: 'pc/general/coupon/CouponList',
						auth: true,
					}
				]
			},
			couponForm: {
				submitLock: false,
				data: {
					id: 0,
					couponname: '',
					flag: 1,
					condition_amount: 0,
					amount: 0,
					discount: 0.0,
					remark: '',
					circulation: 1,
					// begin_time: '',
					// end_time: '',
					validityTime: ['', ''],
					add_time: '',
				}
			},
			rules: {
				data: {
					couponname: [
						{ required: true, message: '请输入名称', trigger: 'blur' },
						{ min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
					],
					condition_amount: [
						{ required: true, message: '请输入金额', trigger: 'blur' },
					],
					amount: [
						{ required: true, message: '请输入金额', trigger: 'blur' },
					],
					discount: [
						{ required: true, message: '请输入金额', trigger: 'blur' },
					],
					remark: [
						{ required: true, message: '请输入备注说明', trigger: 'blur' },
						{ min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
					],
					circulation: [
						{ required: true, message: '请输入发行量', trigger: 'blur' },
					],
					validityTime: [
						{ validator: validateValidityTime, trigger: 'blur' }
					],
				},
			}
		};
	},
	components: {
		ListTitle,
	},
	created: function() {
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getCoupon(this.$route.query.id)
		}
	},
	methods: {
		/*取出需要修改的数据*/
		getCoupon: function() {
			this.header.title = '编辑优惠券规则'
			/*取出需要修改的数据*/
			this.couponForm.submitLock = true;
			this.$get(this.$api.modifyCouponTpl, {
				'id': this.$route.query.id
			}).then(res => {
				// if(res.data.code == 10007){//后台提示需要登录
				// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
				// 	this.reload();
				// }
				if(res.data.code == 0){
					// console.log(res.data.data)
					this.couponForm.data.id = res.data.data.cid
					this.couponForm.data.couponname = res.data.data.couponname
					this.couponForm.data.flag = parseInt(res.data.data.flag)
					this.couponForm.data.condition_amount = res.data.data.condition_amount
					this.couponForm.data.amount = res.data.data.amount
					this.couponForm.data.discount = res.data.data.discount
					this.couponForm.data.remark = res.data.data.remark
					this.couponForm.data.circulation = res.data.data.circulation
					let begin_time = res.data.data.begin_time.substring(0, 10)
					let end_time = res.data.data.end_time.substring(0, 10)
					// console.log(begin_time, 9999)
					this.couponForm.data.validityTime = [begin_time, end_time]
					this.couponForm.data.add_time = res.data.data.add_time
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.couponForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.couponForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.couponForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addCouponTpl//默认是添加
						if(this.couponForm.data.id != ''){//修改
							apiUrl = this.$api.modifyCouponTpl
						}
						/*添加*/
						this.$post(apiUrl, {
							CouponTpl: this.couponForm.data,
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.couponForm.data.id > 0){
									this.$router.go(-1)	
								}else{
									this.$refs[formName].resetFields();
								}
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.couponForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	},
    computed: {
    	
    }
};
</script>

<style lang="stylus" scoped>
.add-coupon
	form
		margin-top: 10px
</style>